<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Arena | Casual Game Team</title>
<script type="text/javascript" src="../lib/match.js"></script>
<script type="text/javascript" src="../lib/gameobject.js"></script>
<script type="text/javascript" src="../lib/jquery_1.7.2.js"></script>
<script type="text/javascript" src="../lib/LobbyClient.js"></script>
<script type="text/javascript" src="../lib/client.js"></script>
<link rel="stylesheet" href="reset.css" />
<style type="text/css">
body
{
   font-family: Segoe UI Light, Arial, Helvetica;
   background-color: #000;
   background-image: url(images/arena5_bg2.jpg);
   background-repeat: no-repeat;
   margin: 0;
}
a, a:visited, a:active, a:hover { color: #fff }

.wrapper
{
   margin-top: 16px;
   text-align: center;
   white-space: nowrap;
}



      </style>
      <script language="javascript" type="text/javascript">

      var wsClient = null;
          // bind to window events
      $(document).ready(function() {
          wsClient = new WsClient();
          wsClient.connect('192.168.11.12',21000);

      });

	  function checkLogin(){
	      var username = document.getElementById("username").value;
		  var password = document.getElementById("password").value;
           //wsClient.lobbyClient = new LobbyClient(wsClient);
          wsClient.lobbyClient.login(username, password);






      }
	  
	  function showRoom(){
		  document.getElementById('room-dtail').style.display = 'block';
		  document.getElementById("login_form").style.display = 'none';
		  document.getElementById("room_list").style.display = 'none';
	  }
      </script>
</head>

<body>
	<div class="wrapper">
		<div id="wap-game" class="wap-border">
        	<div class="login-block" id="login_form">
                <header>
                    <h1 class="upper-case">arena game | đăng nhập</h1>
                </header>
                <form action="arena_form.html" method="get">
                <article>
                    <section>
                        <p>
                            <label>Tài khoản</label>
                            <input type="text" id="username" placeholder="Nhập tên tài khoản" autofocus />
                        </p>
                        <p>
                            <label>Mật khẩu</label>
                            <input type="password" id="password" autofocus />
                        </p>
                        <div   style="text-align:center;margin:10px 0 20px 0;">
                           <a id="btnLogin" class="btnlogin" href="#" onclick="checkLogin()">Đăng nhập</a>
                            <div class="clear-fix"></div>
                        </div>
                        <p><span>Bạn chưa tạo tài khoản? Hãy <a href="#">Đăng ký</a> với chúng tôi</span>
                        </p>
                    </section>
                </article>
                </form>
            </div>
            <!-- form room list -->
            <div class="room-list-block" id="room_list">
            	<div style="margin-bottom:15px;">
	            	<a href="#" class="add-btn left-fix">Tạo phòng</a>
    	            <div class="clear-fix"></div>
                </div>
            	<div class="room-header">
                	<div class="roomid left-fix">ID</div>
                    <div class="room_name left-fix">Tên phòng</div>
                    <div class="room_player left-fix">Số người chơi</div>
                    <div class="room_state left-fix">Trạng thái</div>
                </div>
                <div class="room-row">
                    <div class="roomid left-fix">01</div>
                    <div class="room_name left-fix"><a href="#" onclick="showRoom();">Phòng chơi 1</a></div>
                    <div class="room_player left-fix"><span class="full">full</span></div>
                    <div class="room_state left-fix"><span class="play">play</span></div>
                    <div class="clear-fix"></div>
            	</div>
                <div class="room-row">
                    <div class="roomid left-fix">02</div>
                    <div class="room_name left-fix"><a href="#" onclick="showRoom();">Phòng chơi 2</a></div>
                    <div class="room_player left-fix">03</div>
                    <div class="room_state left-fix"><span class="ready">Ready</span></div>
                    <div class="clear-fix"></div>
            	</div>
                <div class="room-row">
                    <div class="roomid left-fix">03</div>
                    <div class="room_name left-fix"><a href="#" onclick="showRoom();">Phòng chơi 3</a></div>
                    <div class="room_player left-fix"><span class="full">full</span></div>
                    <div class="room_state left-fix"><span class="play">play</span></div>
                    <div class="clear-fix"></div>
            	</div>
                <div class="room-row">
                    <div class="roomid left-fix">04</div>
                    <div class="room_name left-fix"><a href="#" onclick="showRoom();">Phòng chơi 4</a></div>
                    <div class="room_player left-fix">04</div>
                    <div class="room_state left-fix"><span class="ready">ready</span></div>
                    <div class="clear-fix"></div>
            	</div>
                <div class="room-row">
                    <div class="roomid left-fix">01</div>
                    <div class="room_name left-fix"><a href="#" onclick="showRoom();">Phòng chơi 1</a></div>
                    <div class="room_player left-fix"><span class="full">full</span></div>
                    <div class="room_state left-fix"><span class="play">play</span></div>
                    <div class="clear-fix"></div>
            	</div>
                <div class="room-row">
                    <div class="roomid left-fix">02</div>
                    <div class="room_name left-fix"><a href="#" onclick="showRoom();">Phòng chơi 2</a></div>
                    <div class="room_player left-fix">03</div>
                    <div class="room_state left-fix"><span class="ready">Ready</span></div>
                    <div class="clear-fix"></div>
            	</div>
                <div class="room-row">
                    <div class="roomid left-fix">03</div>
                    <div class="room_name left-fix"><a href="#" onclick="showRoom();">Phòng chơi 3</a></div>
                    <div class="room_player left-fix"><span class="full">full</span></div>
                    <div class="room_state left-fix"><span class="play">play</span></div>
                    <div class="clear-fix"></div>
            	</div>
                <div class="room-row">
                    <div class="roomid left-fix">04</div>
                    <div class="room_name left-fix"><a href="#" onclick="showRoom();">Phòng chơi 4</a></div>
                    <div class="room_player left-fix">04</div>
                    <div class="room_state left-fix"><span class="ready">ready</span></div>
                    <div class="clear-fix"></div>
            	</div>
            	<div class="clear-fix"></div>
            </div>
            <!-- room detail -->
            <div id="room-dtail">
            	<div class="room-dt">
                	<header>
                    	<h1>Phòng chơi 1</h1>
                    </header>
                	<div class="player">
                    	<img class="left-fix" src="player_icon.jpg" />
                        <header>
                        	<h2>Player name</h2>
                            level:<span class="level">04</span><br />
                            <input type="submit" class="readybtn right-fix" value="play" />
                        </header>
                    	<div class="clear-fix"></div>
                    </div>
                    <div class="room_player">
                    	<div class="playerlist left-fix">
                        	<img class="left-fix" width="50" src="player_icon.jpg" />
                            <header>
                                <h2>Player name</h2>
                                level:<span class="level">04</span>
                                <div class="ready_state">ready</div>
                            </header>
                        </div>
                        <div class="playerlist left-fix">
                        	<img class="left-fix" width="50" src="player_icon.jpg" />
                            <header>
                                <h2>Player name</h2>
                                level:<span class="level">04</span>
                                <div class="wait_state">Waiting</div>
                            </header>
                        </div>
                        <div class="playerlist left-fix">
                        	<img class="left-fix" width="50" src="player_icon.jpg" />
                            <header>
                                <h2>Player name</h2>
                                level:<span class="level">04</span>
                                <div class="ready_state">ready</div>
                            </header>
                        </div>
                        <div class="playerlist left-fix">
                        	<img class="left-fix" width="50" src="player_icon.jpg" />
                            <header>
                                <h2>Player name</h2>
                                level:<span class="level">04</span>
                                <div class="wait_state">Waiting</div>
                            </header>
                        </div>
                        <div class="playerlist left-fix">
                        	<img class="left-fix" width="50" src="player_icon.jpg" />
                            <header>
                                <h2>Player name</h2>
                                level:<span class="level">04</span>
                                <div class="ready_state">ready</div>
                            </header>
                        </div>
                        <div class="playerlist left-fix">
                        	<img class="left-fix" width="50" src="player_icon.jpg" />
                            <header>
                                <h2>Player name</h2>
                                level:<span class="level">04</span>
                                <div class="wait_state">Waiting</div>
                            </header>
                        </div>
                    	<div class="clear-fix"></div>
                    </div>
                	<div class="clear-fix"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
